class QueryManager extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            manager: {},
            managers: [],
            inputValues: {
                id: '',
                Name: '',
                Phone: '',
                BindingDev: '',
                password: '',
                ownerCode: ''
            },
            managerDevCount: 0
        };
        this.count = 0;
    }

    componentDidMount() {
        this.verify = {
            Name: (value) => {
                if (value.length < 2) {
                    return '管理员姓名至少得2个字符!';
                }
            },
            Phone: (value) => {
                if (value.length !== 11) {
                    return '管理员手机号错误！';
                }
            }
        };
    }

    updateManagerList(page, pageSize) {
        let param = {};
        param.page = page ? page : 1;
        param.pageSize = pageSize ? pageSize : 10;
        param.commCode = this.refs.buildingSelectList.commCode;
        if (param.commCode) {
            postJson("/man/query.x", $.param(param), (data) => {
                this.count = data.data.size;
                this.setState({
                    managers: data.data.list
                });
            });
        }
    }

    updateManagerDevSelect() {
        let param = {};
        param.commCode = this.refs.buildingSelectList.commCode;
        if (param.commCode) {
            postJson("/man/getManagerDevCount.x", $.param(param), (data) => {
                this.setState({
                    managerDevCount: data.data
                });
            });
        }
    }

    getManagerDevOption() {
        let optionStr = [];
        for (let i = 1; i <= this.state.managerDevCount; i++) {
            optionStr.push(<option value={i + ''}>管理机-{i}</option>);
        }
        return optionStr;
    }

    delete(ownerCode) {
        let param = {ownerCode: ownerCode};
        layui.layer.confirm("确定要删除该管理员么?", () => {
            postJson("/man/remove.x", param, () => {
                layui.layer.msg("删除成功!");
                this.updateManagerList();
            })
        })
    }

    addManagerPhone(manager) {
        if (manager) {
            this.state.inputValues.ownerCode = manager.ownerCode;
            this.state.inputValues.Name = manager.ownerName;
            this.state.inputValues.Phone = manager.ownerMob;
            this.state.inputValues.BindingDev = manager.roomInfoNum && manager.roomInfoNum.substring(11, 12) !== '0' ? manager.roomInfoNum.substring(11, 12) : '';
        } else {
            this.state.inputValues = emptyObj(this.state.inputValues);
            console.log("this.state.inputValues", this.state.inputValues)
        }
        this.setState({}, () => {
            this.refs.modal_add_phone.show();
        })
    }

    selectCommCallback() {
        this.updateManagerList();
        this.updateManagerDevSelect();
    }

    inputChange(type, value) {
        this.state.inputValues[type] = value;
        this.setState({});
    }

    btnSubmit() {
        let param = this.state.inputValues;
        param.commCode = this.refs.buildingSelectList.commCode;
        param.commName = this.refs.buildingSelectList.commName;
        postJson("/man/save.x", param, () => {
            parent.layer.msg("保存成功!");
            this.updateManagerList();
            this.refs.modal_add_phone.close();
        });
    }

    render() {
        return (
            <Frame header="管理手机号列表"
                   headerBtns={
                       <HeaderBtn onClick={() => this.addManagerPhone()}><i className="fa fa-plus"/>&nbsp;
                           添加管理机手机号</HeaderBtn>
                   }>
                <Form type="pane">
                    <Item>
                        <LayuiCommSelect
                            formLabelName="小区选择"
                            mask={['building', 'unit', 'floor', 'room']}
                            ref="buildingSelectList"
                            onChangeComm={(comm) => this.selectCommCallback(comm)}/>
                    </Item>
                    <Item>
                        <Table ref="table" count={this.count}
                               pageOnClick={(page, pageSize) => this.updateManagerList(page, pageSize)}>
                            <thead>
                            <tr>
                                <th>小区编号</th>
                                <th>管理员</th>
                                <th>手机号</th>
                                <th>管理机</th>
                                <th>添加时间</th>
                                <th width="80">操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            {
                                this.state.managers.length > 0?this.state.managers.map((manager) => {
                                    console.log(manager);
                                    return (
                                        <tr>
                                            <td>{manager.commCode}</td>
                                            <td>{manager.ownerName}</td>
                                            <td>{manager.ownerMob}</td>
                                            <td>{manager.roomInfoNum && manager.roomInfoNum.substring(11, 12) != '0' ? '管理机-' + manager.roomInfoNum.substring(11, 12) : '未绑定'}</td>
                                            <td>{manager.last_modify}</td>
                                            <td>
                                                <Button btnType="normal"
                                                        size="xs"
                                                        onClick={() => this.addManagerPhone(manager)}>修改
                                                </Button>
                                                <Button btnType="danger"
                                                        size="xs"
                                                        onClick={() => this.delete(manager.ownerCode)}>删除
                                                </Button>
                                            </td>
                                        </tr>
                                    )
                                }):''
                            }
                            </tbody>
                        </Table>
                    </Item>
                </Form>

                <Modal title="新增APP管理员账号" ref="modal_add_phone">
                    <Form type="pane" size="sm" verify={() => {
                        return this.verify;
                    }}>
                        <Input type="hidden" name="ownerCode" value={this.state.inputValues.ownerCode}/>
                        <Item>
                            <Label>管理员姓名</Label>
                            <Input type="text"
                                   name="Name"
                                   value={this.state.inputValues.Name}
                                   lay-verify="Name"
                                   onChange={(value) => this.inputChange('Name', value)}
                                   placeholder="请输入管理员姓名"
                            />
                        </Item>
                        <Item>
                            <Label>管理手机号</Label>
                            <Input type="text"
                                   lay-verify="Phone"
                                   value={this.state.inputValues.Phone}
                                   onChange={(value) => this.inputChange('Phone', value)}/>
                        </Item>
                        <Item>
                            <Label>密码</Label>
                            <Input type="password"
                                   lay-verify="password"
                                   value={this.state.inputValues.password}
                                   onChange={(value) => this.inputChange('password', value)}/>
                        </Item>
                        <Item>
                            <Label>绑定管理机</Label>
                            <Select ref="BindingDev"
                                    value={this.state.inputValues.BindingDev}
                                    onChange={(value) => this.inputChange('BindingDev', value)}>
                                <option value="">不绑定</option>
                                {this.getManagerDevOption()}
                            </Select>
                        </Item>

                        <Item>
                            <Button formBtn={true}
                                    size='sm'
                                    btnType='normal'
                                    lay-submit="true"
                                    onClick={() => this.btnSubmit()}>确定</Button>
                        </Item>
                    </Form>
                </Modal>
            </Frame>
        )
    }
}

ReactDOM.render(<QueryManager/>, document.getElementById("queryManager"));